﻿/** 
 * 点类的构造方法。
 * @param x, y  坐标
 */
function Point(x, y) {
    this.x = x
    this.y = y
}

/**
 * 矩形类的构造方法。
 */
function Rect() {
    /**
     * 设置矩形。
     * @param left, top, right, bottom  四围
     */
    this.set = function(left, top, right, bottom) {
        this.left = left
        this.top = top
        this.right = right
        this.bottom = bottom
    }
}

/**
 * 图片控件类的构造方法。
 * @param hasBorder 有边框则为 true，否则为 false
 * @param image     图片
 * @param parent    父窗口
 * @param rect      位置、尺寸
 */
function PictureCtrl(hasBorder, image, parent, rect) {
    // 初始化成员
    const mImage = document.createElement("canvas")             // 图片
    const mOriginalPosition = new Point(rect.left, rect.top)    // 原位置，即刚被创建时的初始位置
    var mPicHasBorder = hasBorder                               // 有边框则为 true，否则为 false
    const mPosition = new Point(rect.left, rect.top)            // 当前位置
    const mSize = rect.right - rect.left                        // 尺寸

    // 设置尺寸
    const canvas = document.createElement("canvas")
    canvas.width = mSize
    canvas.height = mSize

    // 设置位置
    canvas.style.position = "absolute"
    canvas.style.left = rect.left + "px"
    canvas.style.top = rect.top + "px"

    // 添加到父窗口上
    parent.appendChild(canvas)

    // 保存图片
    mImage.getContext('2d').drawImage(image, rect.left, rect.top, mSize, mSize, 0, 0, mSize, mSize)

    /**
     * 画自身。
     */
    function draw() {
        const drawer = canvas.getContext("2d")
        drawer.drawImage(mImage, 0, 0)
        if (mPicHasBorder) {
            drawEdge(drawer)
        }
    }

    /**
     * 画边框。
     * @param drawer    绘图者
     */
    function drawEdge(drawer) {
        const left = 0
        const top = 0
        const right = mSize - 1
        const bottom = mSize - 1

        drawer.fillStyle = "rgb(214, 211, 206)"
        drawer.fillRect(left, top, mSize - 1, 1)
        drawer.fillRect(left, top, 1, mSize - 1)

        drawer.fillStyle = "rgb(255, 255, 255)"
        drawer.fillRect(left + 1, top + 1, mSize - 3, 1)
        drawer.fillRect(left + 1, top + 1, 1, mSize - 3)

        drawer.fillStyle = "rgb(66, 65, 66)"
        drawer.fillRect(right, top, 1, mSize)
        drawer.fillRect(left, bottom, mSize - 1, 1)

        drawer.fillStyle = "rgb(132, 130, 132)"
        drawer.fillRect(right - 1, top + 1, 1, mSize - 2)
        drawer.fillRect(left + 1, bottom - 1, mSize - 3, 1)
    }

    /**
     * 获取当前位置。
     * @return 当前位置
     */
    canvas.getPosition = function() {
        return mPosition
    }

    /**
     * 获取尺寸。
     * @return 尺寸
     */
    canvas.getSize = function() {
        return mSize
    }

    /**
     * 判断自身是否在初始位置。
     * @return 在初始位置则返回 true，否则返回 false
     */
    canvas.isOnOriginalPosition = function() {
        return mPosition.x == mOriginalPosition.x && mPosition.y == mOriginalPosition.y
    }

    /**
     * 设置边框。
     * @param hasBorder 有边框则为 true，否则为 false
     */
    canvas.setBorder = function(hasBorder) {
        if (mPicHasBorder == hasBorder) {
            return
        }
        mPicHasBorder = hasBorder
        draw()
    }

    /**
     * 设置当前位置。
     * @param 当前位置
     */
    canvas.setPosition = function(Position) {
        canvas.style.left = Position.x + "px"
        canvas.style.top = Position.y + "px"
        mPosition.x = Position.x
        mPosition.y = Position.y
    }

    // 画图片
    draw()

    return canvas
}
